function initCharts() {
    // 定义颜色方案
    const colors = [
        '#00ffff',
        '#0066ff',
        '#00ff99',
        '#ff3366',
        '#9933ff',
        '#ffff00',
    ]

    // 定义标题统一样式
    const titleStyle = {
        textStyle: {
            fontSize: 20,
            fontWeight: 'bold',
            color: '#00ffff',
            textShadow: '0 0 15px rgba(0, 255, 255, 0.8)', // 发光效果
            fontFamily: '"Microsoft YaHei"',
        },
        left: 'left',
        top: 20,
        padding: [0, 0, 0, 20],
    }

    // 图表通用配置
    const chartConfig = {
        backgroundColor: 'transparent',
        title: titleStyle,
        tooltip: {
            backgroundColor: 'rgba(0, 24, 59, 0.9)',
            borderColor: '#00ffff',
            borderWidth: 1,
            textStyle: {color: '#fff'},
        },
        textStyle: {
            color: '#7f8fa6',
        },
        animation: true,
        animationDuration: 2000,
        animationEasing: 'bounceOut',
    }

    // 初始化所有图表实例
    const charts = {
        brandChart: echarts.init(document.getElementById('brandChart')),
        problemChart: echarts.init(document.getElementById('problemChart')),
        seriesChart: echarts.init(document.getElementById('seriesChart')),
        statusChart: echarts.init(document.getElementById('statusChart')),
        trendChart: echarts.init(document.getElementById('trendChart')),
        energyChart: echarts.init(document.getElementById('energyChart')),
    }

    // 获取数据并绘制图表
    fetch('/api/data')
        .then((response) => response.json())
        .then((data) => {
            // 品牌投诉量TOP10图表配置
            charts.brandChart.setOption({
                ...chartConfig,
                title: {
                    ...titleStyle,
                    text: '品牌投诉量TOP10',
                },
                tooltip: {trigger: 'axis'},
                grid: {
                    top: '70px',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: Object.entries(data.brand_complaints)
                        .sort((a, b) => b[1] - a[1])
                        .map((item) => item[0]),
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        color: '#7f8fa6',
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#243e6a',
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    name: '投诉量',
                    nameTextStyle: {
                        color: '#7f8fa6',
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#243e6a',
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#243e6a',
                            type: 'dashed',
                        },
                    },
                },
                series: [
                    {
                        type: 'bar',
                        data: Object.entries(data.brand_complaints)
                            .sort((a, b) => b[1] - a[1])
                            .map((item) => item[1]),
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#00ffff'},
                                {offset: 1, color: '#0066ff'},
                            ]),
                        },
                        barWidth: '40%',
                    },
                ],
            })

            // 问题类型分布图表配置
            charts.problemChart.setOption({
                ...chartConfig,
                title: {
                    ...titleStyle,
                    text: '问题类型分布TOP10',
                    top: '20px',
                },
                tooltip: {trigger: 'item'},
                series: [
                    {
                        type: 'pie',
                        roseType: 'radius',
                        radius: ['20%', '65%'],
                        center: ['50%', '55%'],
                        data: Object.entries(data.problem_distribution)
                            .sort((a, b) => b[1] - a[1])
                            .map(([name, value], index) => ({
                                name,
                                value,
                                itemStyle: {color: colors[index % colors.length]},
                            })),
                        label: {
                            show: true,
                            position: 'outside',
                            formatter: '{b}\n{c}',
                            color: '#e1f5fe',
                            fontSize: 12,
                            lineHeight: 16,
                            padding: [4, 8],
                            borderRadius: 4,
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 14,
                                color: '#00ffff',
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 255, 255, 0.5)',
                            },
                        },
                    },
                ],
            })

            // 车型投诉量TOP10图表配置
            charts.seriesChart.setOption({
                ...chartConfig,
                title: {
                    ...titleStyle,
                    text: '车型投诉量TOP10',
                },
                tooltip: {trigger: 'axis'},
                grid: {
                    top: '70px',
                    left: '3%',
                    right: '15%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'value',
                    name: '投诉量',
                    nameTextStyle: {
                        color: '#7f8fa6',
                    },
                },
                yAxis: {
                    type: 'category',
                    data: Object.entries(data.series_complaints)
                        .sort((a, b) => a[1] - b[1])
                        .map((item) => item[0]),
                    axisLabel: {
                        color: '#7f8fa6',
                        width: 120,
                        overflow: 'truncate',
                        fontSize: 12,
                    },
                },
                series: [
                    {
                        type: 'bar',
                        data: Object.entries(data.series_complaints)
                            .sort((a, b) => a[1] - b[1])
                            .map((item) => item[1]),
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                {offset: 0, color: '#00ffff'},
                                {offset: 1, color: '#0066ff'},
                            ]),
                        },
                        label: {
                            show: true,
                            position: 'right',
                            color: '#7f8fa6',
                        },
                    },
                ],
            })

            // 状态分布图表配置
            charts.statusChart.setOption({
                ...chartConfig,
                title: {
                    ...titleStyle,
                    text: '投诉状态分布',
                },
                tooltip: {trigger: 'item'},
                series: [
                    {
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '50%'],
                        data: Object.entries(data.status_distribution).map(
                            ([name, value], index) => ({
                                name,
                                value,
                                itemStyle: {color: colors[index % colors.length]},
                            })
                        ),
                        label: {
                            show: true,
                            position: 'outside',
                            formatter: '{b}\n{c}',
                            color: '#e1f5fe',
                            fontSize: 12,
                            lineHeight: 16,
                            padding: [4, 8],
                            borderRadius: 4,
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 255, 255, 0.5)',
                            },
                        },
                    },
                ],
            })

            // 投诉趋势图表配置
            charts.trendChart.setOption({
                ...chartConfig,
                title: {
                    ...titleStyle,
                    text: '每日投诉量趋势',
                },
                tooltip: {trigger: 'axis'},
                grid: {
                    top: '60px',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: Object.keys(data.daily_complaints),
                    axisLabel: {
                        color: '#7f8fa6',
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#7f8fa6',
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#243e6a',
                            type: 'dashed',
                        },
                    },
                },
                series: [
                    {
                        type: 'line',
                        data: Object.values(data.daily_complaints),
                        smooth: true,
                        lineStyle: {
                            color: '#00ffff',
                            width: 2,
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: 'rgba(0, 255, 255, 0.3)'},
                                {offset: 1, color: 'rgba(0, 255, 255, 0.1)'},
                            ]),
                        },
                        symbol: 'circle',
                        symbolSize: 8,
                    },
                ],
            })

            // 新能源vs燃油车对比图表配置
            charts.energyChart.setOption({
                ...chartConfig,
                title: {
                    ...titleStyle,
                    text: '新能源vs燃油车投诉对比',
                },
                tooltip: {trigger: 'item'},
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    textStyle: {
                        color: '#7f8fa6',
                    },
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['50%', '70%'],
                        center: ['40%', '50%'],
                        data: [
                            {
                                name: '新能源车',
                                value: data.energy_type_complaints[true] || 0,
                                itemStyle: {color: colors[0]},
                            },
                            {
                                name: '燃油车',
                                value: data.energy_type_complaints[false] || 0,
                                itemStyle: {color: colors[1]},
                            },
                        ],
                        label: {
                            show: true,
                            position: 'outside',
                            formatter: '{b}\n{c}',
                            color: '#e1f5fe',
                            fontSize: 12,
                            lineHeight: 16,
                            padding: [4, 8],
                            borderRadius: 4,
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 255, 255, 0.5)',
                            },
                        },
                    },
                ],
            })
        })

    // 添加提示框逻辑
    const tooltipData = {
        brandChart: {
            title: '品牌投诉量分析',
            content:
                '根据投诉数据统计显示，该数据集中排名前十的汽车品牌投诉情况。建议关注投诉量较高的品牌，分析其共性问题，协助品牌改进产品质量和服务水平。',
        },
        problemChart: {
            title: '问题类型分析',
            content:
                '通过对投诉问题类型的分类统计，展示了TOP10的问题类型分布。这些数据有助于识别当前汽车行业最突出的质量问题，为质量改进提供方向。',
        },
        seriesChart: {
            title: '车型投诉分析',
            content:
                '展示了投诉量最多的十个车型数据。通过横向柱状图清晰展示各车型的具体投诉量，帮助识别问题车型，便于针对性改进。',
        },
        statusChart: {
            title: '投诉状态分析',
            content:
                '展示了所有投诉的处理状态分布情况，包括待处理、处理中、已解决等状态的占比，反映了整体投诉处理效率和进度。',
        },
        trendChart: {
            title: '投诉趋势分析',
            content:
                '展示了一段时期内的每日投诉量变化趋势。通过曲线图可以清晰观察投诉量的波动规律，有助于预测和管理投诉处理资源。',
        },
        energyChart: {
            title: '新能源与燃油车对比分析',
            content:
                '对比展示了新能源汽车和传统燃油车的投诉量占比，反映了不同动力类型车辆的质量状况，为行业发展提供参考。',
        },
    }

    const tooltip = document.querySelector('.tooltip')
    const tooltipTitle = document.querySelector('.tooltip-title')
    const tooltipContent = document.querySelector('.tooltip-content')

    // 为每个图表添加鼠标事件
    Object.keys(charts).forEach((chartId) => {
        const chartDom = document.getElementById(chartId)

        chartDom.addEventListener('mouseenter', (e) => {
            const data = tooltipData[chartId]
            tooltipTitle.textContent = data.title
            tooltipContent.textContent = data.content

            tooltip.style.display = 'block'

            // 计算提示框位置
            const rect = chartDom.getBoundingClientRect()
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop

            tooltip.style.left = rect.left + rect.width / 2 - 150 + 'px'
            tooltip.style.top =
                rect.top + scrollTop - tooltip.offsetHeight - 10 + 'px'
        })

        chartDom.addEventListener('mouseleave', () => {
            tooltip.style.display = 'none'
        })

        // 添加移动效果
        chartDom.addEventListener('mousemove', (e) => {
            const rect = chartDom.getBoundingClientRect()
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop

            // 根据鼠标位置调整提示框位置
            let x = e.clientX - 150
            let y = e.clientY + scrollTop - tooltip.offsetHeight - 10

            // 确保提示框不会超出屏幕
            x = Math.max(10, Math.min(x, window.innerWidth - 310))
            y = Math.max(10, y)

            tooltip.style.left = x + 'px'
            tooltip.style.top = y + 'px'
        })
    })

    // 窗口大小改变时重置图表大小
    window.addEventListener('resize', () => {
        Object.values(charts).forEach((chart) => chart.resize())
    })
}

// 页面加载完成后初始化图表
document.addEventListener('DOMContentLoaded', initCharts)
